<template>
  <div class="rk-ui-doc">
    <aside>
      <router-link
        v-for="(link, index) in data.links"
        :key="index"
        :to="link.path"
        @click="active(index)"
      >
        {{ link.name }}
      </router-link>
    </aside>
    <main>
      <router-view></router-view>
    </main>
    <div class="footer"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, nextTick } from "vue";
import ComponentList from "../packages/list.json";

const data = reactive({
  links: ComponentList.map((item) => ({
    path: `/components/${item.compName}`,
    name: item.compName + " " + item.compZhName,
  })),
});

onMounted(() => {
  nextTick(() => {
    const navList = document.querySelectorAll(".rk-ui-doc aside a");
    navList[0].classList.add("active");
  });
});

const active = (index) => {
  nextTick(() => {
    const navList = document.querySelectorAll(".rk-ui-doc aside a");
    navList.forEach((v) => {
      v.classList.remove("active");
    });
    navList[index].classList.add("active");
  });
};
</script>

<style lang="scss">
.markdown-body {
  padding-bottom: 24px;

  .Reiki-preview {
    section {
      padding: 16px;

      span.anticon {
        margin-right: 8px;
      }
    }
  }
  & > h1{
    clear: both;
    margin: 0 0 0.6em;
  }
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    // color: $color-gray;
    // margin: 2.2rem 0 1.6rem;
    clear: both;
    margin: 1.6em 0 0.6em;
    color: #000000d9;
    font-weight: 500;
    font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji", sans-serif;
  }

  h1 {
    padding-bottom: 0.4rem;
    font-size: 2rem;
    line-height: 1.3;
  }

  h2 {
    font-size: 2rem;
    line-height: 1.225;
    // margin: 35px 0 15px;
    padding-bottom: 0.5em;
    /* border-bottom: 1px solid #ddd; */
  }

  h3 {
    font-size: 1.6rem;
    line-height: 1.43;
    // margin: 20px 0 7px;
  }

  h4 {
    font-size: 1.4rem;
  }

  h5 {
    font-size: 1.2rem;
  }

  h6 {
    font-size: 1rem;
    color: #777;
  }

  table {
    padding: 0;
    word-break: initial;
    border-spacing: 0;
    border-collapse: collapse;
    border-radius: 4px;
    box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f;
    width: 100%;

    tr {
      border-top: 1px solid #fdfdfd;
      margin: 0;
      padding: 0;

      th {
        font-weight: 400;
        border: 1px solid #fdfdfd;
        border-bottom: 0;
        text-align: left;
        margin: 0;
        padding: 12px 16px;
        text-align: left !important;
        color: #333;
      }

      td {
        margin: 0;
        padding: 12px 16px;
        font-size: 14px;
        color: $color-gray;
        text-align: left !important;
        font-weight: 400;
      }

      th:first-child,
      td:first-child {
        margin-top: 0;
      }

      td:first-child {
        font-weight: 600;
        font-family: monospace;
        font-size: 14px;
      }

      th:last-child,
      td:last-child {
        margin-bottom: 0;
      }
    }

    tr:nth-child(2n),
    thead {
      background-color: #fafafa;
    }
  }
}
</style>

<style lang="scss" scoped>
html,
body {
  margin: 0;
  padding: 0;
}
.rk-ui-doc {
  display: flex;
  min-height: 100vh;
  aside {
    width: 200px;
    // padding: 16px;
    border-right: 1px solid #ccc;
    padding-top: 12px;
    a {
      color: $color-gray;
      font-weight: normal;
      font-size: 14px;
      font-weight: 400;
      display: block;
      font-family: Roboto, sans-serif;
      padding: 4px 16px;
      &:hover {
        font-weight: 500;
        color: #000;
      }
      &.router-link-active.router-link-exact-active {
        background: #777;
        color: #fff;
        border-right: 5px solid #000;
        box-shadow: 0 3px 4px #ccc;
      }
    }
  }
  main {
    width: 100%;
    flex: 1;
    padding: 16px 32px 32px;
    position: relative;
  }
}
</style>
